<template>
    <div class="page">
        <div class="set-container">
            <div class="switch-block">
                <span>屏蔽“恒天财富APP”来源商机</span>
                <mt-switch class="has-pointer" v-model="status[3]" @change="updataSetStatus(3)"
                           htmdEvt="switchHTCF_btn"></mt-switch>
            </div>
            <div class="switch-block">
                <span>屏蔽“恒天官网”来源商机</span>
                <mt-switch class="has-pointer" v-model="status[4]" @change="updataSetStatus(4)"
                           htmdEvt="switchHTGW_btn"></mt-switch>
            </div>
            <div class="switch-block">
                <span>屏蔽“偏好探测”来源商机</span>
                <mt-switch class="has-pointer" v-model="status[0]" @change="updataSetStatus(0)"
                           htmdEvt="switchKYC_btn"></mt-switch>
            </div>
            <div class="switch-block">
                <span>屏蔽“拓客工具”来源商机</span>
                <mt-switch class="has-pointer" v-model="status[2]" @change="updataSetStatus(2)"
                           htmdEvt="switchTKTools_btn"></mt-switch>
            </div>
            <div class="switch-block no-border-bottom">
                <span>屏蔽“转发分享”来源商机</span>
                <mt-switch class="has-pointer" v-model="status[1]" @change="updataSetStatus(1)"
                           htmdEvt="switchZFShare_btn"></mt-switch>
            </div>
        </div>
        <!-- <no-data :showNoData="showNoData" :show="show"></no-data> -->
        <!-- <loading :showLoading="showLoading"></loading> -->
    </div>
</template>

<script>

    import "./opportunitySet.less";
    // import "./opportunitySet.js";
    // import noData from '@src/common/noData/noData';
    
    // import noData from '@src/common/components/noData/noData';
    // import loading from '@src/common/loading/loading';
    // import {Switch} from 'mint-ui';
    // import Vue from 'vue';

    // Vue.component(Switch.name, Switch);
    export default {
        name: "opportunitySet",
        components: {
            noData, 
            // loading
        },
        data() {
            return {
                // showNoData: false,
                // show: 'show',
                // showLoading: true,
                status: [false, false, false, false, false]
            };
        },
        created() {
            this.getSetting()
        },
        methods: {
            // 获取设置状态
            getSetting() {
                console.log('获取设置状态')
                this.$axiosHttp.http({
                    name: '',
                    url: apiUrl.showSetUp,
                    // needFailCallback: true,
                    method: 'post',
                    params: {}
                }, (res) => {
                    console.log(res)
                    // this.showLoading = false;
                    // 拿到数据 存到status
                    let list = res.data.data
                    let lists = [0, 0, 0, 0, 0]
                    if (list) {
                        for (let i = 0; i < list.length; i++) {
                            if (list[i].isShield == 1) {
                                lists[list[i].sourceId] = 1
                            }
                        }
                    }
                    const map1 = lists.map(x => x == 1);
                    this.status = map1
                    console.log(map1);
                    console.log(this.status)
                })
            },
            // 更新设置
            updataSetStatus(id) {
                console.log('更新设置')
                let status = this.status[id] ? 1 : 0
                this.$axiosHttp.http({
                    name: '',
                    url: apiUrl.setUp,
                    // needFailCallback: true,
                    method: 'post',
                    params: {
                        sourceId: id, // 0:偏好探测 1:转发分享 2:拓客工具 3:恒天财富APP 4:恒天官网 与ui顺序不一致
                        isShield: status  // 0:未屏蔽 1:屏蔽
                    }
                })
            }
        }
    }
</script>
